{% extends 'base.html' %}



{% block contents_inner %}
    <div class="col-12">
        <div class="section-content">

            <div class="content-head">
                <h4 class="content-title">
                    一线城市AQI指标每月分布
                </h4>
                <div class="corner-content float-right">
                    {% csrf_token %}
                </div>
            </div>
            <div class="content-details" id="pmChart" style="width: 100%; height: 600px;"></div>

        </div>
    </div>

{% endblock %}





{% block js_code %}
    <script>
        const schema = [
            {name: 'date', index: 0, text: '日'},
            {name: 'AQIindex', index: 1, text: 'AQI指数'},
            {name: 'PM25', index: 2, text: 'PM2.5'},
            {name: 'PM10', index: 3, text: 'PM10'},
            {name: 'CO', index: 4, text: '一氧化碳（CO）'},
            {name: 'NO2', index: 5, text: '二氧化氮（NO2）'},
            {name: 'SO2', index: 6, text: '二氧化硫（SO2）'}
        ];
        const itemStyle = {
            opacity: 0.8,
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgba(0,0,0,0.3)'
        };
        var myChart = echarts.init(document.getElementById('pmChart'));

        // 等界面加载完毕后发送Ajax请求
        $(document).ready(function () {
            $.ajax({
                url: '{% url 'chart:AQI_monthly_distribution' %}',
                type: 'post',
                headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()},
                success: function (data) {
                    console.log("成功");
                    const dataBJ = data['北京'];
                    const dataSH = data['上海'];
                    const dataGZ = data['广州'];
                    var option = {
                        color: ['#dd4444', '#fec42c', '#80F1BE'],
                        legend: {
                            top: 10,
                            data: ['北京', '上海', '广州'],
                            textStyle: {
                                fontSize: 16
                            }
                        },
                        grid: {
                            left: '10%',
                            right: 150,
                            top: '18%',
                            bottom: '10%'
                        },
                        tooltip: {
                            backgroundColor: 'rgba(100,100,100,0.5)',
                            formatter: function (param) {
                                var value = param.value;
                                // prettier-ignore
                                return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                                    + param.seriesName + ' ' + value[0] + '日：'
                                    + value[7]
                                    + '</div>'
                                    + schema[1].text + '：' + value[1] + '<br>'
                                    + schema[2].text + '：' + value[2] + '<br>'
                                    + schema[3].text + '：' + value[3] + '<br>'
                                    + schema[4].text + '：' + value[4] + '<br>'
                                    + schema[5].text + '：' + value[5] + '<br>'
                                    + schema[6].text + '：' + value[6] + '<br>';
                            }
                        },
                        xAxis: {
                            type: 'value',
                            name: '日期',
                            nameGap: 16,
                            nameTextStyle: {
                                fontSize: 16
                            },
                            max: 31,
                            splitLine: {
                                show: false
                            }
                        },
                        yAxis: {
                            type: 'value',
                            name: 'AQI指数',
                            nameLocation: 'end',
                            nameGap: 20,
                            nameTextStyle: {
                                fontSize: 16
                            },
                            splitLine: {
                                show: false
                            }
                        },
                        visualMap: [
                            {
                                left: 'right',
                                top: '10%',
                                dimension: 2,
                                min: 0,
                                max: 250,
                                itemWidth: 30,
                                itemHeight: 120,
                                calculable: true,
                                precision: 0.1,
                                text: ['圆形大小：PM2.5'],
                                textGap: 30,
                                inRange: {
                                    symbolSize: [10, 70]
                                },
                                outOfRange: {
                                    symbolSize: [10, 70],
                                    color: ['rgba(255,255,255,0.4)']
                                },
                                controller: {
                                    inRange: {
                                        color: ['#c23531']
                                    },
                                    outOfRange: {
                                        color: ['#999']
                                    }
                                }
                            },
                            {
                                left: 'right',
                                bottom: '5%',
                                dimension: 6,
                                min: 0,
                                max: 50,
                                itemHeight: 120,
                                text: ['明暗：二氧化硫'],
                                textGap: 30,
                                inRange: {
                                    colorLightness: [0.9, 0.5]
                                },
                                outOfRange: {
                                    color: ['rgba(255,255,255,0.4)']
                                },
                                controller: {
                                    inRange: {
                                        color: ['#c23531']
                                    },
                                    outOfRange: {
                                        color: ['#999']
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: '北京',
                                type: 'scatter',
                                itemStyle: itemStyle,
                                data: dataBJ
                            },
                            {
                                name: '上海',
                                type: 'scatter',
                                itemStyle: itemStyle,
                                data: dataSH
                            },
                            {
                                name: '广州',
                                type: 'scatter',
                                itemStyle: itemStyle,
                                data: dataGZ
                            }
                        ]
                    };
                    myChart.setOption(option);
                },
                error: function (error) {
                    console.log("成功");
                    console.error('请求数据失败:', error);
                }
            });

        });
    </script>
{% endblock %}
